fig. 3

We will not go through all the files as our focus is to get started with our React app quickly, but we will briefly go

through some of the more important files and folders.

Our app lives in the src folder. All React components, CSS styles, images (e.g. logo.svg) and anything else our app

needs go here. Any other files outside of this folder are meant to support building your app (the app folder is where

we will work 99% of the time!). In the course of this book, you will come to appreciate the uses for the rest of the

library files and folders.

In the src folder, we have index.js which is the main entry point for our app. In index.js, we render the App React

element into the root DOM node. Applications built with just React usually have a single root DOM node.

index.js

Analyze Code

import React from 'react';

import ReactDOM from 'react-dom';

import './index.css';

import App from './App';

import reportWebVitals from './reportWebVitals';

ReactDOM.render(

<React.StrictMode>

<App />

</React.StrictMode>,

document.getElementById('root')

);

...

reportWebVitals();

In index.js, we import both React and ReactDOM which we need to work with React in the browser. React is the

library for creating views. ReactDOM is the library used to render the UI in the browser. The two libraries were

split into two packages for version 0.14 and the purpose for splitting is to allow for components to be shared

between the web version of React and React Native, thus supporting rendering for a variety of platforms.

index.js imports index.css, App component and reportWebVitals with the following lines.

Analyze Code

import './index.css';

import App from './App';

import reportWebVitals from './reportWebVitals';

It then renders App with:

Analyze Code

ReactDOM.render(

<React.StrictMode>

<App />